.loginBox {
  @apply absolute left-2/4 top-2/4 rounded-lg flex flex-col items-center overflow-hidden overflow-x-auto max-h-screen;
  transform: translate(-50%, -50%);
  width: 420px;
  background-color: #2a2a31;
  padding: 40px 50px 44px;

  .loginSuccess {
    .title {
      @apply flex text-white items-center justify-center mb-5;

      & > img {
        @apply mr-2 w-6;
      }
    }
    .btn {
      @apply bg-theme text-base text-white cursor-pointer text-center;
      width: 300px;
      height: 44px;
      border-radius: 40px;
      line-height: 44px;
      appearance: none;
    }
  }
}

// 输入邮箱DOM
.enterEmail {
  .btn {
    @apply bg-theme text-base text-white cursor-pointer text-center;
    width: 320px;
    height: 44px;
    border-radius: 40px;
    line-height: 44px;
    appearance: none;
  }

  .tip {
    @apply text-xs mt-2 mb-6;
    color: #868686;
    line-height: 18px;
  }

  .errorInfo {
    @apply text-xs mt-2;
    color: #ff3e3e;
    line-height: 18px;
  }
}

.input {
  @apply w-full flex items-center px-5 w-full bg-transparent mb-6;
  height: 44px;
  border: 1px solid #5a5a5a;
  border-radius: 40px;

  & > input {
    @apply flex-1 text-sm text-white h-full bg-transparent border-0 outline-0;

    &::placeholder {
      color: #b2b2b2;
    }
  }

  .addon {
    @apply w-fit shrink-0 text-base;
  }

  .code {
    @apply text-sm;
  }
}

@media screen and (max-width: 767px) {
  .loginBox {
    @apply px-5;
    width: calc(100% - 32px) !important;
    overflow-x: hidden;
    font-size: 12px !important;

    input {
      font-size: 12px !important;
      width: calc(100% - 32px);
      margin: 20px auto;
    }
  }
  .enterEmail {
    @apply w-full;
    .btn {
      @apply bg-theme text-base text-white cursor-pointer text-center;
      width: calc(100% - 32px);
      height: 44px;
      border-radius: 40px;
      line-height: 44px;
      appearance: none;
      margin: 20px auto;
    }
  }
}
